<template>
  <div>
    选择单元
    <el-button type="text"  style="float: right" @click="getUnit">选择单元</el-button>
<!--    弹出层开始-->
    <el-dialog title="选择单元" :visible.sync="stepTwoPop" width="41%">
      <el-row>
        <el-col :span="24" :xs="24">
          <span style="font-weight: 700; color: #303133;">房屋编号</span>
          <el-input v-model="query.unitName" placeholder="请输入楼栋名称" size="small" ></el-input>
        </el-col>
      </el-row>

      <el-table :data="unitList" highlight-current-row>
        <el-table-column prop="id" label="单元编号" width="100px"></el-table-column>
        <el-table-column prop="unitName" label="单元名称" width="150px"></el-table-column>
        <el-table-column label="总层数" width="150px">
          <template slot-scope="scope">
            {{ scope.row.layerCount}} 层
          </template>
        </el-table-column>
        <el-table-column label="有无电梯">
          <template slot-scope="scope">
            {{ scope.row.lift === '1010' ? '有':'无' }}
          </template>
        </el-table-column>
        <el-table-column label="建筑面积">
          <template slot-scope="scope">
            {{ scope.row.unitArea }}㎡
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100px" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="xuanze(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--      分页开始-->
      <el-pagination
        small
        style="float: right"
        :current-page="query.pageNum"
        :page-size="query.pageSize"
        layout="prev, pager, next"
        :total="total"
        :page-sizes="[5,10,15,20]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
      <!--      分页结束-->
    </el-dialog>
<!--    弹出层结束-->

    <el-divider></el-divider>

<!--    单元信息开始-->
    <el-row style="padding-left: 50px;padding-right: 50px;padding-bottom: 40px">
      <el-col :span="6">
        <span class="zitiyangshi">单元ID:</span> <span class="neirong">{{unit.id}}</span>
      </el-col>
      <el-col :span="6">
        <span class="zitiyangshi">单元名称:</span> <span class="neirong">{{ unit.unitName }}</span>
      </el-col>
      <el-col :span="6">
        <span class="zitiyangshi">楼层数:</span> <span class="neirong">{{ unit.layerCount }}</span>
      </el-col>
      <el-col :span="6">
        <span class="zitiyangshi">建筑面积:</span> <span class="neirong">{{ unit.unitArea }}</span> ㎡
      </el-col>
    </el-row>
    <el-row style="padding-left: 50px;padding-right: 50px;">
      <el-col :span="6">
        <span class="zitiyangshi">有无电梯:</span> <span class="neirong">{{ unit.lift==='1010' ? '有':'无' }}</span>
      </el-col>
      <el-col :span="6">
        <span class="zitiyangshi">备注:</span> <span class="neirong">{{ unit.remark }}</span>
      </el-col>
    </el-row>
<!--    单元信息结束-->
  </div>
</template>

<script>
import {queryUnit} from '@/api/assets/unitApi'

export default {
  props:['getUnitId','floorId'],
  data(){
    return{
      // total总数
      total: 0,
      // 楼栋弹窗
      stepTwoPop: false,
      // 条件查询单元
      query: {
        unitName:undefined,
        pageNum:1,
        pageSize:10
      },
      // 单元集合
      unitList:[],
      // 选择的单元
      unit:{
        id:undefined,
        unitName:undefined,
        layerCount:undefined,
        unitArea:undefined,
        lift:undefined,
        remark:undefined
      }
    }
  },
  methods:{

    /**
     * 获取单元
     */
    getUnit(){
      this.stepTwoPop = true
      const query = {
        floorId : this.floorId,
        unitName:this.query.unitName,
        pageNum:1,
        pageSize:10
      }
      queryUnit(query).then(res =>{
        this.unitList = res.data.records
        this.total = res.data.total
      })
    },

    /**
     * 选择的单元
     * @param unit
     */
    xuanze(unit){
      this.unit = unit
      this.stepTwoPop = false
      this.getUnitId(unit.id)
    },

    // 页面大小发生变化
    handleSizeChange(val){
      this.query.pageSize = val
      this.getFloor()
    },
    // 页数
    handleCurrentChange(val){
      this.query.pageNum = val
      this.getFloor()
    }
  },
  watch:{
    'query.unitName':{
      handler(newVal,oldVal){
        this.query.pageNum = 1
        this.getUnit()
      },
      deep:true
    }
  }

}
</script>

<style scoped>
.zitiyangshi{
  color : #686B6D; /*文字颜色*/
  font-weight:bold; /*文字粗体*/
  font-family : 宋体,sans-serif; /*文字字体*/
  font-size:20px;
  height:36px;
}
.neirong{
  margin: 0 5px;
  color : #999999; /*文字颜色*/
  font-weight:bold; /*文字粗体*/
  font-family : 宋体,sans-serif; /*文字字体*/
  font-size:15px;
  height:36px;
}
</style>
